<template>
  <div class="header_bgi2 h_50 lh_50 text_center bgs_full relative" ref="full_box">
    <div>
      <span class="cursor fs_26 fw_bold color_fff font_zh_en" @click="goToHome">{{ headerName }}</span> 
    </div> 

    <div class="main_color absolute right_20 top_center cursor" v-if="isFullscreen" @click="fullScreen(false)">ESC</div>
    <div class="main_color absolute right_20 top_center cursor" v-if="!isFullscreen" @click="fullScreen(true)">全屏</div>
  </div>
</template>

<script>
  // import { getJobList2 } from '@/api/fang-yi/fang-yi.js'
  import screenfull from 'screenfull'

  export default {
    name: 'BigScreenHeader',
    props: {
      headerName: ''
    },
    data() {
      return {
        isFullscreen: false
      } 
    },
    async mounted() {
      
    },
    methods: {
      // 跳转到 首页
      goToHome() {
        let path = '/'

        this.$router.push({
          path
        })
      },

      // 全屏
      fullScreen(val) {
        let element = document.body

        // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
       if (!screenfull.isEnabled) {
          this.$message({
            message:'浏览器不能全屏，安装其他版本试试',
            type:'warning'
          })

          return false
        }
        
        this.isFullscreen = val
        
        screenfull.request(element)

        screenfull.toggle()
      }
    }
  }
</script>

